<template>
  <div class="footer">
    <router-link to="/home"  class="navItem">
      <Icon type="home" class="navItem-icon"></Icon>
      <span>首页</span>
    </router-link>
    <router-link to="/msg" class="navItem">
      <Icon type="chatbubble-working" class="navItem-icon"></Icon>
      <span>消息</span>
    </router-link>
    <router-link to="/news" class="navItem">
      <Icon type="planet" class="navItem-icon"></Icon>
      <span>资讯</span>
    </router-link>
    <router-link to="/tool" class="navItem">
      <Icon type="filing" class="navItem-icon"></Icon>
      <span>工具</span>
    </router-link>
    <router-link to="/about" class="navItem">
      <Icon type="android-person" class="navItem-icon"></Icon>
      <span>我的</span>
    </router-link>
  </div>
</template>
<script>
  export default {
    computed: {
      home () {
        return '/home/' + this.$store.state.type || '/home/index'
      }
    }
  }
</script>

<style lang="scss">
  @import '../assets/style/common.scss';

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 1px solid #ddd;
    width: 100%;
    height: px2rem(80px);
    background: #fff;
    display: flex;
    justify-content: center;
    z-index: 200;
    .navItem {
      flex-grow: 1;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: #777;
      .navItem-icon {
        font-size: px2rem(35px)
      }
      span {
        font-size: px2rem(20px)
      }
    }
    .router-link-active {
      color: rgb(52,149,243);
    }
  }
</style>

